<template>
	<div class="home">
		<!-- 须将组件GeovisContainer放在最前面，保证在其他组件中使用earth时已完成初始化 -->
		<home-header />
		<geovis-container />

		<!-- 工具栏 -->
		<tools />

		<!-- 经纬度显示 -->
		<BaseInfo />

		<!-- <el-button style="position: absolute; top: 120px; left: 50%; z-index: 1111" @click="getXYZ">获取当前视角信息</el-button> -->
	</div>
</template>

<script>
import GeovisContainer from './common/GeovisContainer'
import HomeHeader from './common/HomeHeader'
import tools from './common/tools'
import BaseInfo from './baseInfo/baseInfo'

export default {
	name: 'Home',
	components: {
		GeovisContainer,
		HomeHeader,

		tools,
		BaseInfo
	},
	data() {
		return {
			curLon: 0,
			curLat: 0,
			curHeight: 0
		}
	},
	mounted() {
		this.checkCesium()
	},
	methods: {
		// 监测 viewer 是否被vue监听
		checkCesium() {
			setInterval(() => {
				if (typeof viewer !== 'undefined' && viewer && viewer.__ob__) {
					console.log('cesium 被vue监听!!!')
				}
			}, 1000)
		},
		getXYZ() {
			let centerX = (viewer.camera.positionCartographic.longitude * 180) / Math.PI
			let centerY = (viewer.camera.positionCartographic.latitude * 180) / Math.PI
			let height = Math.ceil(viewer.camera.positionCartographic.height)
			let heading = viewer.camera.heading
			let pitch = viewer.camera.pitch
			let roll = viewer.camera.roll
			console.log(centerX + ',' + centerY + ',' + height + ',' + heading + ',' + pitch + ',' + roll)
		}
	}
}
</script>
<style lang="scss">
.home {
	width: 100%;
	height: 100%;
}
</style>
